import React, { Component } from 'react';
import './progress.scss'
class Progress extends Component {
  // constructor(props) {
  //   super(props)
  // }
  changeProgress (e) {
    let progress = (e.pageX - this.refs.propgressBar.getBoundingClientRect().left) / this.refs.propgressBar.clientWidth;
    this.props.changeProgressHandler && this.props.changeProgressHandler(progress)
  }
  render() {
    return (
      <div className="progress-components" ref="propgressBar" onClick={this.changeProgress.bind(this)}>
        <div style={{width: `${this.props.progress}%`}}></div>
      </div>
    );
  }
}

export default Progress;
